<script setup lang="ts">
import { reactive, UnwrapRef, ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { getAccount } from '@/utils/userData'
import {sendLogin, sendUserInfo} from './loginSetup'
interface FormState {
  name: string;
  pass: string;
  code: string
}
const router = useRouter()
const formRef = ref();
const time = ref()
const remember = ref(false)
const formState: UnwrapRef<FormState> = reactive({
  name: '',
  pass: '',
  code: '',
})
const rules = {
  name: [
    { required: true, message: '请输入用户', trigger: 'blur' }
  ],
  pass: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
}
onMounted(() => {
  time.value = Date.now()
  const account = getAccount()
  if(account.isRemember){
    formState.name = account.UserName,
    formState.pass = account.PassWord
    remember.value = account.isRemember
  }
})
const vulcode = computed(() => {
  return 'http://sso.dev.qihoo.net/token/user/frontCaptcha?time='+time.value
})

const handleFinish = (account: FormState) => {
  time.value = Date.now()
  
  sendLogin(account, remember.value, async token => {
    const res = await sendUserInfo(token)
    router.push('/')
  })
};
const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
  console.log(errors);
}
</script>

<template>
<div class="page-login">
  <div class="login-form">
    <a-form
      name="custom-validation"
      ref="formRef"
      :model="formState"
      :rules="rules"
      @finish="handleFinish"
      @finishFailed="handleFinishFailed"
    >
      <a-form-item has-feedback name="name">
        <a-input v-model:value.trim="formState.name" placeholder="请输入用户" autocomplete="off">
          <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
        </a-input>
      </a-form-item>
      <a-form-item has-feedback name="pass">
        <a-input v-model:value="formState.pass" placeholder="请输入密码" type="password" autocomplete="off">
          <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
        </a-input>
      </a-form-item>
      <div class="code-form-item">
        <a-form-item has-feedback name="code" class="code-input">
          <a-input v-model:value="formState.code" placeholder="请输入验证码" />
        </a-form-item>
        <span class="code-img">
          <img :src="vulcode" @click="time = Date.now()" alt="验证码错误">
        </span>
      </div>
      <a-form-item>
        <a-button type="primary" block class="loginHandle"  html-type="submit" @keyup.enter.native >login</a-button>
      </a-form-item>
    </a-form>
    <div class="footer">
      <a-checkbox v-model:checked="remember">记住密码</a-checkbox>
      <a-tooltip placement="bottomRight" color="orange" title="请联系系统管理员，进行密码重置">
        <a href="javascript:void(0)">忘记密码？</a>
      </a-tooltip>
    </div>
  </div>
</div>
</template>
<style lang="less" scoped>
  .page-login{
    width: 100%;
    height: 100vh;
    background-image: url('../assets/images/login-bg5.png');
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    padding-top: 100px;
    justify-content: center;
    .login-form{
      width: 360px;
      height: 360px;
      border-radius: 15px;
      background: rgba(#707070, 0.46);
      box-shadow: #623a3ac2 2px 2px 20px;
      padding: 40px 34px;
      .code-form-item{
        display: flex;
        justify-content: space-between;
        .code-input{
          width: 180px;
        }
        .code-img{
          display: inline-block;
          width: 84px;
          height: 32px;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
      .footer{
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>